<template>
  <div class="test-form">
    <parser :key="key2" :form-conf="formConf" @submit="sumbitForm"/>

    <!-- 测试运行的返回结果 -->
    <el-dialog :visible.sync="runDialog.open" :title="runDialog.title" width="40%">
      <pre>{{ JSON.stringify(runDialog.json, null, 4) }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button @click="runDialog.open = false">关闭</el-button>
        <el-button type="primary" @click="runDialog.open = false">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    import Parser from './parser/Parser'
    // 若parser是通过安装npm方式集成到项目中的，使用此行引入
    // import Parser from 'form-gen-parser'
    import {getDef, getDefByKey, getDefHis, getDraft} from "@/api/openform/generator";

    export default {
        components: {
            Parser
        },
        props: {},
        data() {
            return {
                key2: +new Date(),
                runDialog: {//测试运行弹出框
                    open: false
                    , title: "数据预览"
                    , json: "{}"
                },
                formConf: {
                    "fields": [
                    ],
                    "formRef": "elForm",
                    "formModel": "formData",
                    "size": "min",
                    "labelPosition": "right",
                    "labelWidth": 100,
                    "formRules": "rules",
                    "gutter": 15,
                    "disabled": false,
                    "span": 24,
                    "formBtns": true
                },
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {
            const defId = this.$route.params && this.$route.params.defId;//获取传入的数据id
            const step = this.$route.params && this.$route.params.step;//获取传入的数据id
            const formKey = this.$route.params && this.$route.params.formKey;
            if(defId) {//使用defId预览
                if("draft"==step) {
                    getDraft(defId).then(res => {
                        if(res.data){
                            this.parser(JSON.parse(res.data.json));
                        }else{
                            this.$message.warning("表单："+dataId+"不存在");
                        }
                    });
                }else if("def"==step) {
                    getDef(defId).then(res => {
                        if(res.data){
                            this.parser(JSON.parse(res.data.json));
                        }else{
                            this.$message.warning("表单："+dataId+"不存在");
                        }
                    });
                }else if("his"==step) {
                    getDefHis(defId).then(res => {
                        if(res.data){
                            this.parser(JSON.parse(res.data.json));
                        }else{
                            this.$message.warning("表单："+dataId+"不存在");
                        }
                    });
                }
            }else if(formKey) {
                if("def"==step) {
                    getDefByKey(formKey).then(res => {
                        if(res.data){
                            this.parser(JSON.parse(res.data.json));
                        }else{
                            this.$message.warning("表单："+formKey+"不存在");
                        }
                    });
                }
            }
        },
        methods: {
            fillFormData(form, data) {
                form.fields.forEach(item => {
                    const val = data[item.__vModel__]
                    if (val) {
                        item.__config__.defaultValue = val
                    }
                })
            },
            parser(json) {
                this.formConf = json;
                this.key2 = +new Date();//key必须有所变化
                //console.log(json);
                /*if(this.formConf.fields) {
                    this.formConf.fields.forEach(e => {
                        if(e.__config__.dataType=='dynamic') {//先清空选项
                            if(e.options) e.options = [];
                            if(e.__slot__ && e.__slot__.options) e.__slot__.options = [];
                            let url = e.__config__.url;
                            let dataPath = e.__config__.dataPath;
                            let label = e.props.props.label;
                            let value = e.props.props.value;
                            let children = e.props.props.children;
                            console.log(url, dataPath, label, value, children);
                            loadOptions({
                                url: url,
                                method: 'get',
                            }).then(res => {
                                let rows = res[dataPath];
                                if(rows) {
                                    let options = [];
                                    rows.forEach(r => {
                                        options.push({
                                          value: r[value],
                                          label: r[label],
                                          children: r[children]
                                        });
                                    });
                                    e.options = options;
                                }
                            });
                        }
                    });
                }*/
            },
            sumbitForm(data) {
                this.runDialog.json = data;
                this.runDialog.open = true;
            }
        }
    }
</script>

<style lang="scss" scoped>
  .test-form {
    margin-top: 10px;
    margin-left: 10px;
    width: 800px;
    padding: 10px;
  }
</style>
© 2021 GitHub, Inc.
